<template>
  <div class="content">
    <div class="tree">
      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </div>
    <div class="box">
      <div class="select">
        <el-select size="small" v-model="value" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button @click="close" size="small" type="primary" style="margin-left:20px">关闭全部</el-button>
      </div>
      <div class="video-contentbx">
        <video-box ref="videoBox" :splitNum="value"></video-box>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        {
          label: 'Root',
          children: [
            {
              label: 'children',
              children: [
                {
                  label: 'websocket_flv',
                  type: 'websocket_flv',
                  projectUuid: '4ea94fcbe6464bbbaa12f3728d0d96c1',
                  cameraIndexCode:
                    '/dist_1/link_2/aa815960-cc9d-3c13-ab06-414281bacb42/0',
                },
                {
                  label: 'http_ﬂv',
                  type: 'http_flv',
                  projectUuid: '4ea94fcbe6464bbbaa12f3728d0d96c1',
                  cameraIndexCode:
                    '/dist_1/link_2/31f4287d-e902-3b21-b592-6b7e3c88d07f/1',
                },
              ],
            },
          ],
        },
      ],
      value: 4,
      options: [
        {
          value: 1,
          label: '一分屏',
        },
        {
          value: 4,
          label: '四分屏',
        },
        {
          value: 9,
          label: '九分屏',
        },
        {
          value: 16,
          label: '十六分屏',
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    }
  },
  components: {},
  methods: {
    close() {
      this.$refs['videoBox'].destroy()
    },
    getDockingCamera(projectUuid) {
      return this.$axios({
        method: 'post',
        url:
          '/api/construction-web-service/docking/camera/getDockingCameraByProjectUuid',
        data: {
          projectUuid: projectUuid,
        },
        isFormData: true,
      })
    },
    handleNodeClick(data) {
      if (data.projectUuid) {
        console.log(data)
        //       请求参数
        //  cameraIndexCode
        //  dockingCameraUuid
        //  videoType 视频格式类型 RTSP RTMP HLS http_flv websocket_flv
        //  videoQuality  0: 高 清, 1: 标 清, 2: 低 清 （默认 1）
        this.getDockingCamera(data.projectUuid).then((info) => {
          console.log(info)
          let params = {
            cameraIndexCode: data.cameraIndexCode,
            dockingCameraUuid: info.data.result.uuid,
            videoType: 'websocket_flv',
            videoQuality: '1',
          }
          this.$axios({
            method: 'post',
            data: params,
            url: '/api/construction-web-service/camera/getWWCameraVideoURL',
            isFormData: true,
          }).then((res) => {
            res = JSON.parse(JSON.parse(res.data).result)
            let content = res.content
            // initVideo 接收参数    Url
            //  cameraIndexCode
            //  dockingCameraUuid
            //
            console.log(
              Object.assign(
                {
                  url: content.url,
                  camera: 'Camera 01',
                },
                params
              )
            )
            this.$refs['videoBox'].initVideo(
              Object.assign(
                {
                  url: content.url,
                  camera: 'Camera 01',
                },
                params
              )
            )
          })
        })
      }
    },
  },
  computed: {},
  created() {},
  mounted() {},
}
</script>
<style lang="less" >
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #eff0f4;
}

.content {
  display: flex;
  -webkit-box-orient: horizontal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  min-width: 0;
  padding: 10px;
  height: 100%;
  .tree {
    overflow: auto;
    box-sizing: border-box;
    width: 220px;
    padding: 10px;
    background: #fff;
  }
  .box {
    background: #fff;
    flex: 1;
    margin-left: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    .select {
      padding-bottom: 10px;
    }
    .video-contentbx {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      overflow: auto;
    }
  }
}
</style>